import React, { useState } from "react";
import { Page, Button } from "zmp-ui";
import { useNavigate } from "zmp-ui";
import { useI18n } from "../i18n";
import { 
  getLocation, 
  scanQRCode, 
  chooseImage, 
  getUserInfo,
  showToast,
  getSystemInfo,
  setNavigationBarTitle,
  setNavigationBarColor,
  requestCameraPermission,
  getAccessToken,
  getVersion,
  setStorage,
  getStorage,
  getNetworkType,
  openProfile,
  openChat,
  openShareSheet,
  createShortcut,
  openBioAuthentication,
  checkStateBioAuthentication,
  hideKeyboard,
  openPhone,
  openSMS,
  viewOAQr,
  keepScreen,
  saveImageToGallery,
  saveVideoToGallery,
  openMiniApp,
  vibrate,
  openWebview,
  getRouteParams,
  getAppInfo,
  getPhoneNumber,
  openProfilePicker,
  connectWifi,
  openMediaPicker,
  getShareableLink,
  closeLoading,
  requestUpdateZalo,
  getDeviceId,
  getDeviceIdAsync,
  getContext,
  getContextAsync,
  getAuthCode,
  getZPIToken,
  setAccessToken,
  openOutApp,
  onCallbackData,
  setAndroidBottomNavigationBar,
  setIOSBottomSafeArea,
  setStatusBar,
  configAppView,
  minimizeApp,
  openPermissionSetting,
  favoriteApp,
  openGroupList,
  requestSendNotification,
  addRating,
  interactOA,
  getSetting,
  authorize,
  checkZaloCameraPermission,
  getUserID,
  getIDToken,
  createCameraContext,
  setupAd,
  loadAd,
  displayAd,
  refreshAd,
  showOAWidget,
  showFunctionButtonWidget,
  scanNFC,
  checkNFC,
  downloadFile,
  showCustomOAWidget,
  login
} from "zmp-sdk";
import Navbar from "../components/navbar";

const ZaloSDKTestPage: React.FunctionComponent = () => {
  const { t } = useI18n();
  const navigate = useNavigate();
  
  // 测试结果状态
  const [testResults, setTestResults] = useState<{[key: string]: any}>({});
  const [loading, setLoading] = useState<{[key: string]: boolean}>({});
  const [isLoggedIn, setIsLoggedIn] = useState<boolean>(false);
  const [loginToken, setLoginToken] = useState<string | null>(null);

  // 通用测试函数
  const runTest = async (testName: string, testFunction: () => Promise<any>) => {
    setLoading(prev => ({ ...prev, [testName]: true }));
    try {
      const result = await testFunction();
      setTestResults(prev => ({ 
        ...prev, 
        [testName]: { 
          success: true, 
          data: result, 
          timestamp: new Date().toLocaleString() 
        } 
      }));
      showToast({ message: `${testName} 测试成功` });
    } catch (error: any) {
      setTestResults(prev => ({ 
        ...prev, 
        [testName]: { 
          success: false, 
          error: error.message || error, 
          timestamp: new Date().toLocaleString() 
        } 
      }));
      showToast({ message: `${testName} 测试失败: ${error.message || error}` });
    } finally {
      setLoading(prev => ({ ...prev, [testName]: false }));
    }
  };

  // 位置获取测试
  const testLocation = () => {
    runTest('位置获取', async () => {
      return new Promise((resolve, reject) => {
        getLocation({
          success: (data) => {
            console.log('位置获取成功:', data);
            resolve(data);
          },
          fail: (error) => {
            console.error('位置获取失败:', error);
            reject(error);
          }
        });
      });
    });
  };

  // 二维码扫描测试
  const testQRCode = () => {
    runTest('二维码扫描', async () => {
      if (!isLoggedIn) {
        throw new Error('请先登录Zalo账号');
      }
      return new Promise((resolve, reject) => {
        scanQRCode({
          success: (data) => {
            console.log('二维码扫描成功:', data);
            resolve(data);
          },
          fail: (error) => {
            console.error('二维码扫描失败:', error);
            reject(error);
          }
        });
      });
    });
  };

  // 图片选择测试
  const testChooseImage = () => {
    runTest('图片选择', async () => {
      return new Promise((resolve, reject) => {
        chooseImage({
          count: 1,
          sourceType: ['album', 'camera'],
          success: (data) => {
            console.log('图片选择成功:', data);
            resolve(data);
          },
          fail: (error) => {
            console.error('图片选择失败:', error);
            reject(error);
          }
        });
      });
    });
  };

  // 获取访问令牌测试
  const testGetAccessToken = () => {
    runTest('获取访问令牌', async () => {
      try {
        const token = await getAccessToken();
        console.log('访问令牌获取成功:', token);
        return token;
      } catch (error) {
        console.error('访问令牌获取失败:', error);
        throw error;
      }
    });
  };

  // 获取版本信息测试
  const testGetVersion = () => {
    runTest('获取版本信息', async () => {
      try {
        const version = await getVersion();
        console.log('版本信息获取成功:', version);
        return version;
      } catch (error) {
        console.error('版本信息获取失败:', error);
        throw error;
      }
    });
  };

  // 获取网络类型测试
  const testGetNetworkType = () => {
    runTest('获取网络类型', async () => {
      try {
        const networkType = await getNetworkType();
        console.log('网络类型获取成功:', networkType);
        return networkType;
      } catch (error) {
        console.error('网络类型获取失败:', error);
        throw error;
      }
    });
  };

  // 获取设备ID测试
  const testGetDeviceId = () => {
    runTest('获取设备ID', async () => {
      try {
        const deviceId = await getDeviceId();
        console.log('设备ID获取成功:', deviceId);
        return deviceId;
      } catch (error) {
        console.error('设备ID获取失败:', error);
        throw error;
      }
    });
  };

  // 获取用户ID测试
  const testGetUserID = () => {
    runTest('获取用户ID', async () => {
      try {
        const userId = await getUserID();
        console.log('用户ID获取成功:', userId);
        return userId;
      } catch (error) {
        console.error('用户ID获取失败:', error);
        throw error;
      }
    });
  };

  // 获取应用信息测试
  const testGetAppInfo = () => {
    runTest('获取应用信息', async () => {
      try {
        const appInfo = await getAppInfo();
        console.log('应用信息获取成功:', appInfo);
        return appInfo;
      } catch (error) {
        console.error('应用信息获取失败:', error);
        throw error;
      }
    });
  };

  // 获取路由参数测试
  const testGetRouteParams = () => {
    runTest('获取路由参数', async () => {
      try {
        const routeParams = await getRouteParams();
        console.log('路由参数获取成功:', routeParams);
        return routeParams;
      } catch (error) {
        console.error('路由参数获取失败:', error);
        throw error;
      }
    });
  };

  // 检查Zalo摄像头权限测试
  const testCheckZaloCameraPermission = () => {
    runTest('检查Zalo摄像头权限', async () => {
      try {
        const permission = await checkZaloCameraPermission();
        console.log('Zalo摄像头权限检查成功:', permission);
        return permission;
      } catch (error) {
        console.error('Zalo摄像头权限检查失败:', error);
        throw error;
      }
    });
  };

  // 检查生物识别状态测试
  const testCheckStateBioAuthentication = () => {
    runTest('检查生物识别状态', async () => {
      try {
        const bioState = await checkStateBioAuthentication();
        console.log('生物识别状态检查成功:', bioState);
        return bioState;
      } catch (error) {
        console.error('生物识别状态检查失败:', error);
        throw error;
      }
    });
  };

  // 获取设置信息测试
  const testGetSetting = () => {
    runTest('获取设置信息', async () => {
      try {
        const setting = await getSetting();
        console.log('设置信息获取成功:', setting);
        return setting;
      } catch (error) {
        console.error('设置信息获取失败:', error);
        throw error;
      }
    });
  };

  // 存储测试
  const testStorage = () => {
    runTest('存储功能', async () => {
      try {
        // 设置存储
        await setStorage({ data: { test_key: 'test_value' } });
        console.log('存储设置成功');
        
        // 获取存储
        const result = await getStorage({ keys: ['test_key'] });
        console.log('存储获取成功:', result);
        
        return { set: 'success', get: result };
      } catch (error) {
        console.error('存储操作失败:', error);
        throw error;
      }
    });
  };

  // 震动测试
  const testVibrate = () => {
    runTest('震动功能', async () => {
      try {
        await vibrate();
        console.log('震动成功');
        return { message: '震动已触发' };
      } catch (error) {
        console.error('震动失败:', error);
        throw error;
      }
    });
  };

  // 打开权限设置测试
  const testOpenPermissionSetting = () => {
    runTest('打开权限设置', async () => {
      try {
        await openPermissionSetting();
        console.log('权限设置页面已打开');
        return { message: '权限设置页面已打开' };
      } catch (error) {
        console.error('打开权限设置失败:', error);
        throw error;
      }
    });
  };

  // Toast测试
  const testToast = () => {
    runTest('Toast提示', async () => {
      showToast({ message: '这是一个测试Toast' });
      return { message: 'Toast已显示' };
    });
  };

  // SDK环境检测
  const testSDKEnvironment = () => {
    runTest('SDK环境检测', async () => {
      const environment = {
        userAgent: navigator.userAgent,
        isZaloApp: navigator.userAgent.includes('ZaloApp'),
        isZaloMiniApp: navigator.userAgent.includes('ZaloMiniApp'),
        hasZaloSDK: typeof (window as any).ZaloSDK !== 'undefined',
        hasZMP: typeof (window as any).ZMP !== 'undefined',
        windowLocation: window.location.href,
        protocol: window.location.protocol,
        host: window.location.host,
        pathname: window.location.pathname,
        search: window.location.search,
        hash: window.location.hash,
        timestamp: new Date().toISOString()
      };
      
      console.log('SDK环境检测结果:', environment);
      
      // 检查是否在Zalo环境中
      if (!environment.isZaloApp && !environment.isZaloMiniApp) {
        throw new Error('当前不在Zalo App环境中，SDK可能无法正常工作');
      }
      
      return environment;
    });
  };

  // SDK详细检测
  const testSDKDetailedCheck = () => {
    runTest('SDK详细检测', async () => {
      const checkResults = {
        // 环境检测
        environment: {
          userAgent: navigator.userAgent,
          isZaloApp: navigator.userAgent.includes('ZaloApp'),
          isZaloMiniApp: navigator.userAgent.includes('ZaloMiniApp'),
          isZaloWeb: navigator.userAgent.includes('ZaloWeb'),
          hasZaloSDK: typeof (window as any).ZaloSDK !== 'undefined',
          hasZMP: typeof (window as any).ZMP !== 'undefined',
          windowLocation: window.location.href,
          protocol: window.location.protocol,
          host: window.location.host
        },
        
        // SDK方法检测
        sdkMethods: {
          getLocation: typeof getLocation,
          scanQRCode: typeof scanQRCode,
          login: typeof login,
          getAccessToken: typeof getAccessToken,
          getUserInfo: typeof getUserInfo,
          showToast: typeof showToast,
          getSystemInfo: typeof getSystemInfo
        },
        
        // 尝试调用简单方法
        simpleTests: {} as any
      };
      
      // 测试getVersion（同步方法）
      try {
        const version = getVersion();
        checkResults.simpleTests.getVersion = { success: true, result: version };
      } catch (error: any) {
        checkResults.simpleTests.getVersion = { success: false, error: error.message };
      }
      
      console.log('SDK详细检测结果:', checkResults);
      
      // 检查是否在正确的环境中
      if (!checkResults.environment.isZaloApp && !checkResults.environment.isZaloMiniApp) {
        throw new Error('当前不在Zalo App环境中，SDK可能无法正常工作');
      }
      
      return checkResults;
    });
  };

  // 开发环境模拟
  const testDevEnvironmentSimulation = () => {
    runTest('开发环境模拟', async () => {
      // 检查是否在Zalo Mini App Studio中
      const isZaloStudio = navigator.userAgent.includes('zmp-ide');
      const isLocalhost = window.location.host.includes('localhost');
      
      if (!isZaloStudio || !isLocalhost) {
        throw new Error('当前不在Zalo Mini App Studio开发环境中');
      }
      
      // 模拟Zalo环境
      const mockEnvironment = {
        isZaloStudio: true,
        isLocalhost: true,
        userAgent: navigator.userAgent,
        suggestion: '在Zalo Mini App Studio中，某些SDK功能可能需要特殊配置或真实设备测试',
        recommendations: [
          '1. 检查app-config.json中的权限配置',
          '2. 尝试使用"Deploy Testing"功能部署到测试环境',
          '3. 在真实Zalo App中测试完整功能',
          '4. 检查Zalo Mini App Studio的开发者文档'
        ]
      };
      
      console.log('开发环境模拟结果:', mockEnvironment);
      
      return mockEnvironment;
    });
  };

  // Zalo登录测试
  const testZaloLogin = () => {
    runTest('Zalo登录', async () => {
      try {
        const token = await login();
        console.log('Zalo登录成功:', token);
        setIsLoggedIn(true);
        setLoginToken(token);
        return { token, message: '登录成功' };
      } catch (error) {
        console.error('Zalo登录失败:', error);
        setIsLoggedIn(false);
        setLoginToken(null);
        throw error;
      }
    });
  };

  // 摄像头权限测试
  const testRequestCameraPermission = () => {
    runTest('摄像头权限', async () => {
      try {
        if (!isLoggedIn) {
          throw new Error('请先登录Zalo账号');
        }
        const result = await requestCameraPermission();
        console.log('摄像头权限请求结果:', result);
        return result;
      } catch (error) {
        console.error('摄像头权限请求失败:', error);
        throw error;
      }
    });
  };

  // 用户信息获取测试
  const testGetUserInfo = () => {
    runTest('用户信息获取', async () => {
      return new Promise((resolve, reject) => {
        getUserInfo({
          success: (data) => {
            console.log('用户信息获取成功:', data);
            resolve(data);
          },
          fail: (error) => {
            console.error('用户信息获取失败:', error);
            reject(error);
          }
        });
      });
    });
  };

  // 系统信息获取测试
  const testGetSystemInfo = () => {
    runTest('系统信息获取', async () => {
      try {
        const data = await getSystemInfo();
        console.log('系统信息获取成功:', data);
        return data;
      } catch (error) {
        console.error('系统信息获取失败:', error);
        throw error;
      }
    });
  };

  // 导航栏标题设置测试
  const testSetNavigationBarTitle = () => {
    runTest('设置导航栏标题', async () => {
      setNavigationBarTitle({ title: 'Zalo SDK测试页面' });
      return { message: '导航栏标题已设置' };
    });
  };

  // 导航栏颜色设置测试
  const testSetNavigationBarColor = () => {
    runTest('设置导航栏颜色', async () => {
      setNavigationBarColor({ 
        color: '#007AFF',
        textColor: 'white'
      });
      return { message: '导航栏颜色已设置' };
    });
  };

  // 清除所有测试结果
  const clearResults = () => {
    setTestResults({});
    showToast({ message: '测试结果已清除' });
  };

  // 渲染测试结果
  const renderTestResult = (testName: string, result: any) => {
    if (!result) return null;
    
    return (
      <div key={testName} style={{
        margin: '10px 0',
        padding: '10px',
        backgroundColor: result.success ? '#e8f5e8' : '#ffeaea',
        borderRadius: '8px',
        border: `1px solid ${result.success ? '#4caf50' : '#f44336'}`
      }}>
        <div style={{ 
          fontWeight: 'bold', 
          color: result.success ? '#2e7d32' : '#c62828',
          marginBottom: '5px'
        }}>
          {testName} - {result.success ? '成功' : '失败'}
        </div>
        <div style={{ fontSize: '12px', color: '#666', marginBottom: '5px' }}>
          时间: {result.timestamp}
        </div>
        <div style={{ fontSize: '12px', fontFamily: 'monospace', whiteSpace: 'pre-wrap' }}>
          {result.success ? JSON.stringify(result.data, null, 2) : result.error}
        </div>
      </div>
    );
  };

  return (
    <Page className="page" style={{ padding: 0, background: '#F5F5F7' }}>
      {/* 顶部导航栏 */}
      <Navbar title="Zalo SDK功能测试" />

      {/* 内容区域 */}
      <div style={{ padding: '20px' }}>
        <div style={{ marginBottom: '20px' }}>
          <h3 style={{ margin: '0 0 10px 0', color: '#333' }}>Zalo SDK功能测试</h3>
          <p style={{ margin: '0 0 15px 0', color: '#666', fontSize: '14px' }}>
            测试各种Zalo SDK功能是否正常工作
          </p>
          
          <Button 
            onClick={clearResults}
            style={{ marginBottom: '15px' }}
            variant="secondary"
          >
            清除测试结果
          </Button>
        </div>

        {/* 基础功能测试 */}
        {/* 登录状态 */}
        <div style={{ marginBottom: '20px', padding: '15px', backgroundColor: isLoggedIn ? '#e8f5e8' : '#fff3cd', borderRadius: '8px', border: `1px solid ${isLoggedIn ? '#28a745' : '#ffc107'}` }}>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <div>
              <h4 style={{ margin: '0 0 5px 0', color: isLoggedIn ? '#155724' : '#856404' }}>
                {isLoggedIn ? '✅ 已登录Zalo' : '⚠️ 未登录Zalo'}
              </h4>
              {loginToken && (
                <div style={{ fontSize: '12px', color: '#666', wordBreak: 'break-all' }}>
                  Token: {loginToken.substring(0, 20)}...
                </div>
              )}
              <div style={{ fontSize: '12px', color: '#666', marginTop: '5px' }}>
                {isLoggedIn ? '可以测试需要登录的API' : '某些API需要先登录才能使用'}
              </div>
            </div>
            <Button 
              onClick={testZaloLogin}
              loading={loading['Zalo登录']}
              style={{ minWidth: '100px' }}
              type={isLoggedIn ? 'neutral' : 'highlight'}
            >
              {isLoggedIn ? '重新登录' : '登录Zalo'}
            </Button>
          </div>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>环境检测</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testSDKEnvironment}
              loading={loading['SDK环境检测']}
              style={{ minWidth: '120px' }}
              type="highlight"
            >
              SDK环境检测
            </Button>
            <Button 
              onClick={testSDKDetailedCheck}
              loading={loading['SDK详细检测']}
              style={{ minWidth: '120px' }}
              type="highlight"
            >
              SDK详细检测
            </Button>
            <Button 
              onClick={testDevEnvironmentSimulation}
              loading={loading['开发环境模拟']}
              style={{ minWidth: '120px' }}
              type="highlight"
            >
              开发环境模拟
            </Button>
          </div>
        </div>

        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>基础功能测试</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testLocation}
              loading={loading['位置获取']}
              style={{ minWidth: '120px' }}
            >
              位置获取
            </Button>
            <Button 
              onClick={testGetUserInfo}
              loading={loading['用户信息获取']}
              style={{ minWidth: '120px' }}
            >
              用户信息
            </Button>
            <Button 
              onClick={testGetSystemInfo}
              loading={loading['系统信息获取']}
              style={{ minWidth: '120px' }}
            >
              系统信息
            </Button>
            <Button 
              onClick={testGetAccessToken}
              loading={loading['获取访问令牌']}
              style={{ minWidth: '120px' }}
            >
              访问令牌
            </Button>
            <Button 
              onClick={testGetVersion}
              loading={loading['获取版本信息']}
              style={{ minWidth: '120px' }}
            >
              版本信息
            </Button>
            <Button 
              onClick={testGetNetworkType}
              loading={loading['获取网络类型']}
              style={{ minWidth: '120px' }}
            >
              网络类型
            </Button>
          </div>
        </div>

        {/* 设备信息测试 */}
        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>设备信息测试</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testGetDeviceId}
              loading={loading['获取设备ID']}
              style={{ minWidth: '120px' }}
            >
              设备ID
            </Button>
            <Button 
              onClick={testGetUserID}
              loading={loading['获取用户ID']}
              style={{ minWidth: '120px' }}
            >
              用户ID
            </Button>
            <Button 
              onClick={testGetAppInfo}
              loading={loading['获取应用信息']}
              style={{ minWidth: '120px' }}
            >
              应用信息
            </Button>
            <Button 
              onClick={testGetRouteParams}
              loading={loading['获取路由参数']}
              style={{ minWidth: '120px' }}
            >
              路由参数
            </Button>
          </div>
        </div>

        {/* 权限相关测试 */}
        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>
            权限相关测试
            {!isLoggedIn && <span style={{ fontSize: '12px', color: '#ff6b6b', marginLeft: '10px' }}>⚠️ 需要登录</span>}
          </h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testRequestCameraPermission}
              loading={loading['摄像头权限']}
              style={{ minWidth: '120px' }}
              disabled={!isLoggedIn}
            >
              摄像头权限
            </Button>
            <Button 
              onClick={testCheckZaloCameraPermission}
              loading={loading['检查Zalo摄像头权限']}
              style={{ minWidth: '120px' }}
            >
              检查摄像头权限
            </Button>
            <Button 
              onClick={testCheckStateBioAuthentication}
              loading={loading['检查生物识别状态']}
              style={{ minWidth: '120px' }}
            >
              生物识别状态
            </Button>
            <Button 
              onClick={testOpenPermissionSetting}
              loading={loading['打开权限设置']}
              style={{ minWidth: '120px' }}
            >
              权限设置
            </Button>
            <Button 
              onClick={testGetSetting}
              loading={loading['获取设置信息']}
              style={{ minWidth: '120px' }}
            >
              设置信息
            </Button>
          </div>
        </div>

        {/* 媒体功能测试 */}
        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>
            媒体功能测试
            {!isLoggedIn && <span style={{ fontSize: '12px', color: '#ff6b6b', marginLeft: '10px' }}>⚠️ 需要登录</span>}
          </h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testQRCode}
              loading={loading['二维码扫描']}
              style={{ minWidth: '120px' }}
              disabled={!isLoggedIn}
            >
              二维码扫描
            </Button>
            <Button 
              onClick={testChooseImage}
              loading={loading['图片选择']}
              style={{ minWidth: '120px' }}
            >
              图片选择
            </Button>
          </div>
        </div>

        {/* 存储和交互功能测试 */}
        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>存储和交互功能测试</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testStorage}
              loading={loading['存储功能']}
              style={{ minWidth: '120px' }}
            >
              存储功能
            </Button>
            <Button 
              onClick={testVibrate}
              loading={loading['震动功能']}
              style={{ minWidth: '120px' }}
            >
              震动功能
            </Button>
          </div>
        </div>

        {/* UI功能测试 */}
        <div style={{ marginBottom: '20px' }}>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>UI功能测试</h4>
          <div style={{ display: 'flex', flexWrap: 'wrap', gap: '10px' }}>
            <Button 
              onClick={testToast}
              loading={loading['Toast提示']}
              style={{ minWidth: '120px' }}
            >
              Toast提示
            </Button>
            <Button 
              onClick={testSetNavigationBarTitle}
              loading={loading['设置导航栏标题']}
              style={{ minWidth: '120px' }}
            >
              设置标题
            </Button>
            <Button 
              onClick={testSetNavigationBarColor}
              loading={loading['设置导航栏颜色']}
              style={{ minWidth: '120px' }}
            >
              设置颜色
            </Button>
          </div>
        </div>

        {/* 测试结果 */}
        <div>
          <h4 style={{ margin: '0 0 10px 0', color: '#333' }}>测试结果</h4>
          {Object.keys(testResults).length === 0 ? (
            <div style={{ 
              textAlign: 'center', 
              color: '#999', 
              padding: '20px',
              backgroundColor: '#fff',
              borderRadius: '8px'
            }}>
              暂无测试结果
            </div>
          ) : (
            <div>
              {Object.entries(testResults).map(([testName, result]) => 
                renderTestResult(testName, result)
              )}
            </div>
          )}
        </div>
      </div>
    </Page>
  );
};

export default ZaloSDKTestPage;
